<template>
  <div id="app">
    <Tou></Tou>
    <div class="zj">
      <img src="../assets/image/border-bott.png" />
    </div>
    <!-- 商品信息 -->
    <div class="shangping">
      <div class="shangping_1_spxx">
        <div>
          <img
            v-if="isOpen(0)"
            :src="getAssetsFile(coy_id.img1)"
            style="width: 500px"
          />
          <img
            v-if="isOpen(1)"
            :src="getAssetsFile(coy_id.img2)"
            style="width: 500px"
          />
          <img
            v-if="isOpen(2)"
            :src="getAssetsFile(coy_id.img3)"
            style="width: 500px"
          />
          <img
            v-if="isOpen(3)"
            :src="getAssetsFile(coy_id.img4)"
            style="width: 500px"
          />
        </div>
        <div class="shangping_1_img">
          <img
            @mouseover="openItem(0)"
            @mouseleave="closeItem(0)"
            :src="getAssetsFile(coy_id.img1)"
            style="width: 100px"
            :class="{ hot_1_2: isOpen(0) }"
          />
          <img
            @mouseover="openItem(1)"
            @mouseleave="closeItem(1)"
            :src="getAssetsFile(coy_id.img2)"
            style="width: 100px"
            :class="{ hot_1_2: isOpen(1) }"
          />
          <img
            @mouseover="openItem(2)"
            @mouseleave="closeItem(2)"
            :src="getAssetsFile(coy_id.img3)"
            style="width: 100px"
            :class="{ hot_1_2: isOpen(2) }"
          />
          <img
            @mouseover="openItem(3)"
            @mouseleave="closeItem(3)"
            :src="getAssetsFile(coy_id.img4)"
            style="width: 100px"
            :class="{ hot_1_2: isOpen(3) }"
          />
        </div>
      </div>
      <div class="shangping_2">
        <h4>{{ coy_id.name }}<img src="../assets/image/yushou.png" /></h4>
        <span>{{ coy_id.xx }}</span>
        <div class="shangping_3">
          <div class="shangping_3_1">现价</div>
          <div class="jiage">
            <span class="jiage_1">￥</span>
            <span>{{ coy_id.price }}</span>
          </div>
          <div class="jiage_2">
            <img src="../assets/image/jiage_1.png" />
            <span class="biaoqian">超值价</span>
          </div>
        </div>
        <div class="shangping_4_1">
          <img src="../assets/image/border-bott.png" style="width: 500px" />
          <div class="shangping_4">
            <span class="shangping_3_1">颜色</span>
            <a title="彩色"
              ><img :src="getAssetsFile(coy_id.img1)" /><span
                class="shangping_4_img"
              ></span
            ></a>
          </div>
          <div class="shangping_4_2">
            <span class="shangping_3_1">重量</span>
            <a style="font-size: 18px; font-weight: bolder"
              >{{ coy_id.k.kg_kg }}g</a
            >
          </div>
          <div>
            <span>生产日期:</span>
            <a style="font-size: 15px">{{ coy_id.date }}</a>
          </div>
          <div>
            <span>剩余库存:</span>
            <a style="font-size: 20px">{{ coy_id.num }}</a>
          </div>
          <div class="shangping_4_3">
            <span style="line-height: 35px">数量</span>
            <div class="shangping_4_3_1">
              <button class="btn btn-danger" @click="jian()">-</button>
              <input type="number" class="form-control" v-model="num" />
              <button class="btn btn-danger" @click="jia()">+</button>
            </div>
          </div>
          <div><img src="../assets/image/border-bott.png" width="550px" /></div>
          <div class="shangping_5">
            <a href="javascript:void(0)" class="shangping_5_1">立即购买</a>
            <a href="javascript:void(0)" class="shangping_5_2"
              ><button @click="add(coy_id)">加入购物车</button></a
            >
          </div>
        </div>
      </div>
    </div>
    <img
      src="../assets/image/border-bott.png"
      width="1200px"
      style="margin: 26px"
    />
    <div class="like">
      <div class="like_1">
        <div class="like_left">
          <div class="like_left_1">猜你喜欢</div>
          <div class="like_left_2">
            <div class="like_left_2_1">
              <a href=""><img src="../assets/img/7.jpg" /></a>
              <div class="like_left_2_1_1">
                <a href=""> 聆风缪斯手办 </a>
                <div>60天已售<span> 888</span></div>
                <div>368元</div>
              </div>
            </div>
            <div class="like_left_2_1">
              <a href=""><img src="../assets/img/8.jpg" /></a>
              <div class="like_left_2_1_1">
                <a href=""> DNF官方艺术 </a>
                <div>60天已售<span> 446</span></div>
                <div>299元</div>
              </div>
            </div>
            <div class="like_left_2_1">
              <a href=""><img src="../assets/img/6.jpg" /></a>
              <div class="like_left_2_1_1">
                <a href=""> 凯丽强化机 </a>
                <div>60天已售<span> 142</span></div>
                <div>368元</div>
              </div>
            </div>
            <div class="like_left_2_1">
              <a href=""><img src="../assets/img/1.jpg" /></a>
              <div class="like_left_2_1_1">
                <a href=""> 混沌之神·奥兹玛</a>
                <div>60天已售<span> 76</span></div>
                <div>299元</div>
              </div>
            </div>
            <div class="like_left_2_1">
              <a href=""><img src="../assets/img/9.jpg" /></a>
              <div class="like_left_2_1_1">
                <a href=""> 女魔法雪人盲 </a>
                <div>60天已售<span> 19</span></div>
                <div>79元</div>
              </div>
            </div>
            <div class="like_left_2_1">
              <a href=""><img src="../assets/img/10.jpg" /></a>
              <div class="like_left_2_1_1">
                <a href=""> 女魔法-墨镜</a>
                <div>60天已售<span> 10</span></div>
                <div>79元</div>
              </div>
            </div>
          </div>
        </div>
        <div class="like_right">
          <nav class="like_rigth_2">
            <ul>
              <li :style="xxStyle" @click="xx"><a>商品详细</a></li>
              <li :style="xx2Style" @click="xx2"><a>用户点评</a></li>
              <li :style="xx3Style" @click="xx3"><a>售后服务</a></li>
            </ul>
          </nav>
          <div class="like_rigth_1" v-show="showXx">
            <img :src="getAssetsFile(coy_id.image.image2)" />
            <img :src="getAssetsFile(coy_id.image.image3)" />
            <img :src="getAssetsFile(coy_id.image.image4)" />
            <img :src="getAssetsFile(coy_id.image.image5)" />
            <img :src="getAssetsFile(coy_id.image.image6)" />
            <img :src="getAssetsFile(coy_id.image.image7)" />
          </div>
          <div v-show="showXx2">
            <div>
              <ul v-for="p in pls" :key="p.pl_id">
                <div class="div_img">
                  <li class="pl">
                    <div style="text-align: center; width: 88px">
                      <img :src="getAssetsFile(p.mail.mail_img)" />
                      <p>{{ p.mail.user }}</p>
                    </div>
                    <div class="pl_1_1">
                      {{ p.pl_plnr }}
                      <p>
                        <img
                          :src="getAssetsFile(p.pl_img1)"
                          style="width: 200px"
                        />
                      </p>
                      <p>
                        {{ p.pl_date
                        }}<el-button
                          type="text"
                          @click="toggleInput(p.pl_id), openContent(p.pl_id)"
                          >回复</el-button
                        >
                      </p>
                    </div>
                  </li>

                  <li
                    class="pl_2"
                    v-for="p2 in getReplies(p.pl_id)"
                    :key="p2.pl2_id"
                  >
                    <div style="text-align: center">
                      <img
                        :src="getAssetsFile(p2.mail.mail_img)"
                        style="width: 38px"
                      />
                      <p>{{ p2.mail.user }}</p>
                    </div>
                    <div class="pl_1">
                      <p>{{ p2.pl2_pl_qq }}</p>
                      {{ p2.pl2_plnr }}
                      <p>
                        {{ p2.pl2_date }}
                        <el-button
                          type="text"
                          @click="toggleInput(p.pl_id), openContent(p.pl_id)"
                          >回复</el-button
                        >
                      </p>
                    </div>
                  </li>

                  <li v-if="isShow === p.pl_id" class="pl_3">
                    <img :src="getAssetsFile(mail.mail_img)" />
                    <input
                      v-model="p2.pl2_plnr"
                      :placeholder="'回复@' + p.mail.user"
                    />
                    <input type="hidden" v-model="p2.pl2_qq" />
                    <input type="hidden" v-model="p2.pl2_pl_id" />
                    <el-button
                      type="primary"
                      style="height: 66px; width: 130px"
                      @click="addPl2()"
                      >发布</el-button
                    >
                  </li>
                </div>
              </ul>
            </div>
          </div>
          <div class="showXx3" v-show="showXx3">
            <img src="../assets/image/7tian.png" />
          </div>
        </div>
      </div>
    </div>
    <img
      src="../assets/image/border-bott.png"
      width="1200px"
      style="margin: 20px"
    />

    <Wei></Wei>
  </div>
</template>
<script lang="ts" setup>
import { ref, watch, computed, isRef } from "vue";
import { getAssetsFile } from "../assets/img";
import { useRoute } from "vue-router";
import { ElMessage } from "element-plus";
import axios from "axios";
import "../assets/css/bootstrap.css";
import Tou from "../views/tou.vue";
import Wei from "../views/wei.vue";

const route = useRoute();
const coy_id: any = ref({ date: "", k: {}, image: {}, mail: {} });
const p: any = ref({ commodity: {}, mail: {} });
const p2: any = ref({ commodity: {}, mail: {} });
const pl: any = ref([]);
const pl2: any = ref([]);
const pls: any = ref([{ mail: {} }]);
const mail: any = ref({});
const showXx = ref(true);
const showXx2 = ref(false);
const showXx3 = ref(false);
// const value = ref(4.6);
// const colors = ref(["#a01f23", "#a01f23", "#a01f23"]);
const openIndex = ref(0); // 当前打开元素的索引
const lastHoveredIndex = ref(-1); // 最后一个悬停的元素的索引

const isShow = ref(null);
const toggleInput = (p) => {
  if (isShow.value === p) {
    isShow.value = null; // 点击已展开的评论，关闭回复框
  } else {
    isShow.value = p; // 点击未展开的评论，打开回复框，并更新 isOpen 的值
  }
};

const openItem = (index) => {
  openIndex.value = index; // 设置当前打开元素的索引
  lastHoveredIndex.value = index; // 设置最后一个悬停的元素的索引
};
const closeItem = (index) => {
  if (index !== lastHoveredIndex.value) {
    openIndex.value = -1; // 关闭所有元素
  }
};
const isOpen = computed(() => {
  return (index) => openIndex.value === index; // 计算属性判断是否打开对应的元素
});

// 监听 mail.value.qq 的变化，更新 dz.value.dz_qq 的值
watch(mail, (newMail) => {
  coy_id.value.mail.qq = newMail.qq;
  p2.value.pl2_qq = newMail.qq;
});

/**用户*/
mail.value.qq = route.params.qq;
const Mail = () => {
  axios.get("http://127.0.0.1:1234/U/" + mail.value.qq).then((response) => {
    mail.value = response.data;
  });
};
Mail();
/**接收传来的id*/
coy_id.value.id = route.params.id;
const C = () => {
  axios.get("http://127.0.0.1:1234/C/" + coy_id.value.id).then((response) => {
    coy_id.value = response.data;
    console.log(coy_id.value);
  });
};
C();
/**显示评论*/
const StuN = () => {
  axios.post("http://127.0.0.1:1234/P/spper", p.value).then((response) => {
    pl.value = response.data;
    pls.value = pl.value.filter((f) => f.pl_sp_id == coy_id.value.id);
    console.log(pls.value);
  });
};
StuN();

const openContent = (id) => {
  p2.value.pl2_pl_id = id;
  console.log(p2.value.pl2_pl_id); // 根据按钮点击更新 pl2.pl2_pl_id 的值
};

watch(pls, (newVal) => {
  newVal.forEach((item) => {
    // 在数据变化时更新 p2.pl2_pl_id 的值
    if (item.pl_id === p2.value.pl2_pl_id) {
      p2.value.pl2_pl_id = item.pl_id;
    }
  });
});

/**显示回复评论*/
const StuN2 = () => {
  axios.post("http://127.0.0.1:1234/P2/spper", p2.value).then((response) => {
    pl2.value = response.data;
    console.log(pl2.value);
  });
};
StuN2();
const getReplies = (plId) => {
  return pl2.value.filter((p2) => p2.pl2_pl_id === plId);
};

/**添加*/
const num = ref(1);
const add = (coy_id) => {
  // 如果 coy_id 是 ref 对象，则通过 .value 访问和修改
  if (isRef(coy_id)) {
    coy_id.value.num = num.value;
  } else {
    // 如果 coy_id 是普通对象，则直接修改属性
    coy_id.num = num.value;
  }
  axios
    .post(`http://127.0.0.1:1234/C/gwc`, coy_id)
    .then((response) => {
      if (response.data === 1) {
        ElMessage({
          showClose: true,
          message: "添加到购物车成功",
          type: "success",
          center: true,
        });
      } else {
        ElMessage({
          showClose: true,
          message: "添加失败！",
          type: "error",
        });
      }
    })
    .catch((err) => {
      alert(err);
    });
};
/**添加回复评论*/
const imageData = ref({
  pl_img1: "",
});
const addPl2 = () => {
  axios.post(`http://127.0.0.1:1234/P2`, p2.value).then((response) => {
    if (response.data === 1) {
      ElMessage({
        message: "已评论",
        type: "success",
        center: true,
      });
      // 更新评论列表
      pl2.value.push(p2.value);
    } else {
      ElMessage({
        showClose: true,
        message: "评论失败！",
        type: "error",
      });
    }
  });
};

//数量减
const jian = () => {
  if (num.value <= 1) {
    alert("商品数量不能小于1！");
  } else {
    num.value--;
  }
};
//数量加
const jia = () => {
  if (num.value >= coy_id.value.num) {
    alert("商城中没有更多的库存了！");
  } else {
    num.value++;
  }
};
const xxStyle = ref({});
const xx2Style = ref({});
const xx3Style = ref({});
//打开关闭
const xx = () => {
  xxStyle.value = { backgroundColor: "#FFF", color: "#a01f23" };
  xx2Style.value = { backgroundColor: "#d0d0d0", color: "#666" };
  xx3Style.value = { backgroundColor: "#d0d0d0", color: "#666" };

  showXx.value = true;
  showXx2.value = false;
  showXx3.value = false;
};
const xx2 = () => {
  xxStyle.value = { backgroundColor: "#d0d0d0", color: "#666" };
  xx2Style.value = { backgroundColor: "#FFF", color: "#a01f23" };
  xx3Style.value = { backgroundColor: "#d0d0d0", color: "#666" };

  showXx.value = false;
  showXx2.value = true;
  showXx3.value = false;
};
const xx3 = () => {
  xxStyle.value = { backgroundColor: "#d0d0d0", color: "#666" };
  xx2Style.value = { backgroundColor: "#d0d0d0", color: "#666" };
  xx3Style.value = { backgroundColor: "#FFF", color: "#a01f23" };

  showXx.value = false;
  showXx2.value = false;
  showXx3.value = true;
};
</script>
<style scoped>
@import "../assets/css/TandW.css";
@import "../assets/css/spxx.css";
</style>
